<template>
  <a-card :bordered="false">
    <content-header title="在线更新"></content-header>
    <a-spin :spinning="isLoading">
      <div class="container">
        <a-alert class="my-description" :show-icon="false" type="warning">
          <span slot="description">
            <p>1. 使用 "一键更新" 功能可以将当前的后端文件和数据库升级到最新的版本（同时包含打包后的H5，不包含uniapp和微信小程序）。</p>
            <p>
              2. 在使用在线升级功能之前，
              <strong>请务必</strong>对当前后端项目文件和数据库进行备份，否则一旦造成数据损失将无法挽回。
            </p>
            <p>3. uniapp端包含微信小程序端、APP端的升级，需要手动下载进行替换，然后在XBuilder中重新发行。</p>
            <p>4. 每次只能升级一个版本，不能跨版本升级。</p>
            <p>
              5. 如果您的源码做过二次开发或者修改，
              <strong>请不要</strong>使用"一键更新"，因为这将会覆盖您工作过的文件，而且无法找回。
            </p>
          </span>
        </a-alert>
        <a-alert v-if="currentVersion" :type="!nextVersion ? 'success' : 'info'" banner>
          <span slot="message">
            <span>您当前的系统版本号是v{{ currentVersion }}，</span>
            <span v-if="!nextVersion">已经是最新版本，无需升级</span>
            <span v-else>下一版本是v{{ nextVersion }}，可直接使用一键更新</span>
          </span>
        </a-alert>
        <div class="update-list">
          <a-row v-for="(item, index) in updateList" :key="index" class="log-item">
            <div class="col-left">
              <div class="update-date">
                <div class="dcircle">
                  <div class="dcircle2"></div>
                </div>
                <p class="date">{{ item.release_time }}</p>
              </div>
            </div>
            <div class="col-right">
              <div class="log-content">
                <div class="log-title">
                  <span class="version">版本号：V{{ item.version }}</span>
                  <span class="actions">
                    <a
                      v-if="checkModule(item, 'server') && item.version === nextVersion"
                      @click="handleUpdate(item)"
                      class="live-update"
                      href="javascript:void(0);"
                      title="一键更新升级到此版本"
                    >一键更新</a>
                    <a
                      v-if="checkModule(item, 'uniapp')"
                      @click="handleDownload(item, 'uniapp')"
                      class="live-update"
                      href="javascript:void(0);"
                    >下载uniapp端升级包</a>
                  </span>
                </div>
                <div class="update-log">{{ item.update_log }}</div>
              </div>
            </div>
          </a-row>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as Api from '@/api/cloud/upgrade'
import { ContentHeader } from '@/components'
import { inArray } from '@/utils/util'

export default {
  components: {
    ContentHeader
  },
  data () {
    return {
      // 加载中
      isLoading: false,
      // 系统更新记录
      updateList: [],
      // 当前版本号
      currentVersion: '',
      // 下一个版本号
      nextVersion: '',
    }
  },
  created () {
    // 获取环境信息
    this.$nextTick(() => {
      this.getUpgradeInfo()
    })
  },
  methods: {

    // 获取在线更新信息
    getUpgradeInfo () {
      this.isLoading = true
      Api.info()
        .then(result => {
          this.updateList = result.data.updateList
          this.currentVersion = result.data.currentVersion
          this.nextVersion = result.data.nextVersion
        })
        .finally(() => this.isLoading = false)
    },

    // 验证是否存在指定模块
    checkModule ({ modules }, val) {
      return inArray(val, modules)
    },

    // 下载升级包
    handleDownload ({ version_id }, module) {
      const app = this
      app.isLoading = true
      Api.download(version_id, module)
        .then(result => {
          // window.open(result.data.url, '_blank')
          app.download(result.data.url)
        })
        .finally(() => app.isLoading = false)
    },

    // 执行浏览器下载
    download (url) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.setAttribute('target', '_blank')
      a.href = url
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },

    // 在线升级
    handleUpdate ({ version_id }) {
      const app = this
      app.$confirm({
        title: '您确定要升级到这个版本吗? ',
        content: '请务必做好后端文件与数据库的备份工作，否则造成数据损失将无法逆转',
        okText: '我已备份，确认升级',
        onOk () {
          return app.onSubmitUpdate(version_id)
        }
      })
    },

    /**
     * 确认在线升级
     */
    onSubmitUpdate (versionId) {
      const app = this
      app.isLoading = true
      return Api.update(versionId)
        .then(result => {
          app.$message.success(result.message)
          app.getUpgradeInfo()
        })
        .finally(() => app.isLoading = false)
    },


  }
}
</script>
<style lang="less" scoped>
.my-description {
  margin-bottom: 20px;
  font-size: 13px !important;
  p {
    margin-bottom: 5px;
  }
  /deep/.ant-alert-description {
    font-size: 13px;
  }
}
.update-list {
  overflow: hidden;
  font-size: 14px;
  padding: 20px 0;
  margin-top: 20px;
}

.log-item {
  display: flex;
  &:last-child {
    .log-content {
      padding-bottom: 10px;
    }
  }
  .col-left {
    width: 200px;
  }
  .col-right {
    width: 800px;
  }
}

.update-date {
  position: relative;
  height: 100%;
  padding-right: 46px;
  font-size: 14px;
  text-align: right;
  &:after {
    content: '';
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px solid #ccc;
    margin-right: 10px;
    position: absolute;
    right: 0;
    top: 22px;
  }
  .dcircle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d7e6f9;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .dcircle2 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #51a7f7;
    }
  }

  .date {
    padding-top: 3px;
  }
}

.log-content {
  padding-top: 3px;
  padding-left: 45px;
  padding-bottom: 50px;
  min-height: 80px;
  .log-title {
    margin-bottom: 15px;
  }
  .actions {
    margin-left: 22px;
    font-size: 13px;
    a {
      margin-right: 8px;
    }
  }
  .update-log {
    white-space: pre !important;
    line-height: 22px;
    color: #999;
    font-size: 13px;
  }
}
</style>
